(function($){
    var defaults = {
        direction: 'left', //滚动方向，默认左右滚动
        NUM: 1,  //可见的轮播数量
        SPEED: 1000, //滚动速度
        DELAY: 2000, //滚动频率
        ifMouseoverStop: false, //鼠标经过时是否暂停
    }
    function Autoplay(el, settings) {
        this.el = el;
        this.ul = this.el.children('ul');
        this.li = this.ul.children('li');
        this.width = this.li.eq(0).width();
        this.height = this.li.eq(0).height();
        this.options = Object.assign({}, defaults, settings || {});console.log(this.options);
        this.num = 0;
        this.timer = null;
        this.len = 0;
        this.init();
    }
    Autoplay.prototype = {
        init: function() {
            this.initDom();
            if(this.options.ifMouseoverStop) this.initEvents();
            this.clock();
        },
        initDom: function() {
            this.el.css({position: 'relative', overflow: 'hidden'});
            this.ul.css({position: 'absolute', left:0, top:0});
            for(var i = 0; i < this.options.NUM; i++) {
                this.ul.append(this.li.eq(i).clone());
            }
            this.ul = this.el.children('ul');
            this.li = this.ul.children('li');
            this.len = this.li.length;
            if(this.options.direction === 'left') {
                this.el.css({width: this.options.NUM*this.width+'px', height: this.height+'px'});
                this.ul.css({width: this.len*this.width+'px', height: this.height+'px'})
            }else if(this.options.direction === 'top') {
                this.el.css({width: this.width+'px', height: this.options.NUM*this.height+'px'});
            } 
        },
        initEvents: function(){
            var _this = this;
            this.el.hover(function(){
                clearInterval(_this.timer);
                _this.timer = null;
            },function(){
                _this.clock();
            })
        },
        play: function(){
            if(this.options.direction === 'left') {
                if(this.num < 0){
                    this.num = this.len - 1;
                    this.ul.css({left:-this.len*li_W+'px'});
                }
                if(this.num > (this.len - this.options.NUM)){
                    this.num = 1;
                    this.ul.css({left:'0'});
                }
                var left = this.num*this.width;
                this.ul.animate({left:-left+'px'}, this.options.SPEED);
            }else if(this.options.direction === 'top') {
                if(this.num < 0){
                    this.num = this.len - 1;
                    this.ul.css({top:-this.len*li_W+'px'});
                }
                if(this.num > (this.len - this.options.NUM)){
                    this.num = 1;
                    this.ul.css({top:'0'});
                }
                var top = this.num*this.height;
                this.ul.animate({top:-top+'px'}, this.options.SPEED);
            } 
        },
        clock: function() {
            var _this = this;
            function auto() {
                if(_this.timer) _this.timer = null;
                _this.timer = setTimeout(() => {
                    _this.num++;
                    _this.play();
                    auto();
                }, _this.options.DELAY);
            }
            auto();
        }
    }

    window.play = function(el, settings){
        new Autoplay(el, settings);
    }
})(jQuery)